<template>
  <div class="comment">
    <div class="comm">
        <div class="avatar">
          <img :src="item.aut_photo" alt="">
        </div>
        <div class="comm-content">
          <div class="name">{{ item.aut_name }}</div>
          <div class="box">{{ item.content }}</div>
          <div class="com-bottom">
            <span>{{ item.pubdate | timeFilter }}</span>
            <span class="reply" v-if="isReply === true" @click="openReply">回复 {{ item.reply_count }}</span>
          </div>
        </div>
        <div class="com-like">
          <van-icon @click="nogivefive(item)" v-if="item.is_liking === true" name="like" color="#f00" class="icon-zan"  />
          <van-icon @click="givefive(item)" v-else name="like" class="icon-zan" />{{ item.like_count }}
        </div>
      </div>
  </div>
</template>

<script>
import bus from '@/utils/bus.js'
import { givefiveComment, cancelgivefive } from '@/api/comment.js'

export default {
  props: ['item', 'isReply'],
  methods: {
    // 打开回复面板
    openReply () {
      // console.log(this.$parent) // $el: div.van-list
      // console.log(this.$parent.$parent) // $el: div.detail
      this.$parent.$parent.$refs.reply.show = true
      // 用bus将item数据传给回复面板
      bus.$emit('passValue', this.item)
    },
    // 点赞
    async givefive (item) {
      await givefiveComment(item.com_id.toString())
      item.is_liking = true
      item.like_count += 1
    },
    // 取消点赞
    async nogivefive (item) {
      await cancelgivefive(item.com_id)
      item.is_liking = false
      if (item.like_count > 0) {
        item.like_count -= 1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment{
  margin: 20px 0;
  .comm{
    display: flex;
    padding:0 10px;

    .avatar{
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .comm-content{
      flex: 1;

      .name{
        color: #0094ff;
      }

      .box{
        margin: 10px 0 20px 10px;
      }

      .com-bottom{
        .reply{
          background-color: #f4f5f6;
          margin-left:10px;
          padding: 10px 20px;
          border-radius: 20px;
        }
      }
    }
  }

  .icon-zan{
    font-size: 20px;
  }
}

</style>
